<template>
	<view class="contain">
	<view class="flex-col page">
	  <view class="flex-col group">
	    <view class="shrink-0 section"></view>
	    <view class="flex-col self-center relative section_2 space-y-38">
	      <view class="flex-row space-x-12">
	        <text class="font_1">服务一：</text>
	        <text class="font_2">所有的产品拍摄服务</text>
	      </view>
	      <view class="flex-row space-x-12">
	        <text class="font_1">服务二：</text>
	        <text class="font_2">所有的产品拍摄服务</text>
	      </view>
	      <view class="flex-row space-x-12">
	        <text class="font_1">服务三：</text>
	        <text class="font_2">所有的产品拍摄服务</text>
	      </view>
	      <view class="flex-row space-x-12">
	        <text class="font_1">服务三：</text>
	        <text class="font_2">所有的产品拍摄服务</text>
	      </view>
	      <view class="flex-row space-x-12">
	        <text class="font_1">服务三：</text>
	        <text class="font_2">所有的产品拍摄服务</text>
	      </view>
	    </view>
	  </view>
	  <view class="flex-row equal-division">
	    <view class="flex-col section_3 equal-division-item space-y-28">
	      <text class="self-start font_3">包月服务</text>
	      <view class="flex-row justify-end items-baseline group_2">
	        <text class="font_4 text text_2">186</text>
	        <text class="font_5 text_4">￥</text>
	      </view>
	    </view>
	    <view class="flex-col section_4 equal-division-item space-y-28">
	      <text class="self-start font_3">季度服务</text>
	      <view class="flex-col justify-start items-end relative">
	        <text class="font_4 text">586</text>
	        <text class="font_5 pos">￥</text>
	      </view>
	    </view>
	    <view class="flex-col section_4 equal-division-item space-y-28">
	      <text class="self-start font_3">年度服务</text>
	      <view class="flex-row justify-end items-baseline">
	        <text class="font_4 text text_3">1086</text>
	        <text class="font_5 text_5">￥</text>
	      </view>
	    </view>
	  </view>
	  <view class="flex-col group_3">
	    <view class="flex-col">
	      <view class="flex-col justify-start items-center text-wrapper"><text class="text_6">立即开通托管服务</text></view>
	      <view class="flex-row justify-center items-center group_4 space-x-12">
	        <view class="section_5"></view>
	        <text class="text_7">购买即同意《服务条款》</text>
	      </view>
	    </view>
	    <image
	      class="image"
	      src="https://qiniu.ccchongya.com/chongya/images/16986382920705848234.png"
	    />
	    <view class="flex-col items-start group_5">
	      <text class="font_6">仅会员可以参与的营销活动</text>
	      <text class="font_6 text_8">目前提供三种营销活动：</text>
	      <text class="font_6">1、优惠券活动</text>
	      <text class="font_6">2、在线抽奖活动</text>
	      <text class="font_6">3、客户见证（老带新）活动</text>
	    </view>
	  </view>
	</view>
	</view>
</template>
<style scoped>
.page {
  padding-bottom: 372rpx;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  height: 1241rpx;
}
.section {
  border-radius: 0px 0px 100rpx 100rpx;
  background-image: url('https://qiniu.ccchongya.com/chongya/images/16986382920742233554.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 976rpx;
}
.section_2 {
  margin-top: -400rpx;
  padding: 72rpx 36rpx 100rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  box-shadow: 0px 4rpx 34rpx #d7e1fabf;
}
.space-y-38 > view:not(:first-child),
.space-y-38 > text:not(:first-child),
.space-y-38 > image:not(:first-child) {
  margin-top: 76rpx;
}
.font_1 {
  font-size: 40rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 38rpx;
  color: #4578ff;
}
.font_2 {
  font-size: 40rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 38rpx;
  color: #000000;
}
.equal-division {
  margin: 76rpx 52rpx 0;
}
.section_3 {
  flex: 1 1 205rpx;
}
.font_3 {
  font-size: 32rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 30rpx;
  color: #623e2a;
}
.group_2 {
  padding: 0 24rpx;
}
.font_4 {
  font-size: 56rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 38rpx;
  color: #d6773b;
}
.text {
  line-height: 40rpx;
}
.text_2 {
  margin-right: -120rpx;
}
.font_5 {
  font-size: 32rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 22rpx;
  color: #d6773b;
}
.text_4 {
  margin-right: 88rpx;
}
.section_4 {
  flex: 1 1 205rpx;
  margin-left: 16rpx;
}
.equal-division-item {
  padding: 32rpx 16rpx 48rpx 24rpx;
  background-color: #faf1e1;
  border-radius: 20rpx 44rpx 0px 20rpx;
  height: 211rpx;
  border: solid 1.2rpx #f2e4cb;
}
.space-y-28 > view:not(:first-child),
.space-y-28 > text:not(:first-child),
.space-y-28 > image:not(:first-child) {
  margin-top: 56rpx;
}
.pos {
  position: absolute;
  left: 26rpx;
  bottom: 0;
}
.text_3 {
  margin-right: -152rpx;
}
.text_5 {
  margin-right: 120rpx;
}
.group_3 {
  margin-top: 68rpx;
  padding: 0 110rpx;
}
.text-wrapper {
  padding: 28rpx 0;
  border-radius: 382rpx;
  background-image: url('https://qiniu.ccchongya.com/chongya/images/16986382920732218823.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text_6 {
  color: #ffffff;
  font-size: 46rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 43rpx;
}
.group_4 {
  padding-left: 8rpx;
  padding-top: 28rpx;
}
.space-x-12 > view:not(:first-child),
.space-x-12 > text:not(:first-child),
.space-x-12 > image:not(:first-child) {
  margin-left: 24rpx;
}
.section_5 {
  background-color: #ffffff;
  border-radius: 16rpx;
  width: 32rpx;
  height: 32rpx;
  border: solid 2rpx #1890ff;
}
.text_7 {
  color: #000000a1;
  font-size: 24rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 22rpx;
}
.image {
  margin-left: 4rpx;
  margin-top: 92rpx;
  width: 524rpx;
  height: 56rpx;
}
.group_5 {
  margin-top: 76rpx;
}
.font_6 {
  font-size: 28rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 62rpx;
  color: #454b5f;
}
.text_8 {
  margin-left: 4rpx;
}
</style>
<script>
	const API = require('@/utils/api/shops.js').default;
	const $ = require('@/utils/api.js');
	let self;
		import { mapMutations } from 'vuex';
	export default {
		data() {
			return {

			};
		},
		onLoad: function(options) {

		},
		onShow() {

		},
		methods: {
			...mapMutations(['setCartNum']),

		},
		created() {
		},
		computed: {
			i18n() {
				return this.$t('cart')
			},
		},
		mounted() {},
		destroyed() {},
		components: {},
		onPullDownRefresh() {

		},
		onReachBottom() {
		}
	}
</script>
